<template>
  <div class="category">
    <search></search>
    <div class="cate">
       
      <scroll-view scroll-y class="left_list">
        <view
          class="left_item"
          v-for="(item,index) in lefts"
          :key="index"
          :class="{active : index === tabIndex}"
          @tap="clickitem(index)"
        >
        {{item.cat_name}}
        </view>
      
      </scroll-view>
      <scroll-view scroll-y class="right_list">
        <div class="right_head">
          <image src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/1739345823/O1CN01V4RrLq1ssymt0lJC5_!!0-item_pic.jpg_580x580Q90.jpg"></image>
        </div>
        <view class="logo_main">
          <div class="right_logo">
         <block v-for="(item1,index1) in goods" :key="index1">
            <view class="logo_title">
            {{item1.cat_name}}
          </view>
          <view class="logo_list">
            <view class="logo_good" v-for="(item2,index2) in item1.children" :key="index2" @tap="goToList(item2.cat_name)">
              <image :src="'https://autumnfish.cn/wx/'+item2.cat_icon"></image>
              <text>{{item2.cat_name}}</text>
            </view>
          </view>
         </block>
        </div>
        </view>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import  request  from "@/utils/request.js";
import Search from "@/components/search"
import { setTimeout } from 'timers';
export default {
  components: {
    Search
  },
  data () {
    return {
      lefts: [],
      tabIndex: 0,
      goods:[]
    }
  },
  methods: {
    clickitem (index) {
      this.tabIndex = index
      this.goods = [];
     setTimeout(() => {
        this.goods = this.lefts[index].children
     
     },0)
      console.log(this.goods);
    },
    goToList(name){
       wx.navigateTo({
        url: `/pages/goods_list/main?keyword=${name}`
      })
    }
    
  },
mounted () {
  request.get("categories").then(res=> {
    console.log(res.data.message);
    this.lefts = res.data.message
      this.goods = this.lefts[0].children
      console.log(this.goods);
  })
}
}
</script>

<style lang="scss" scoped>
.cate {
  position: fixed;
  left: 0;
  right: 0;
  top: 100rpx;
  bottom: 0;
  // background: #ccc;
  display: flex;
  flex-wrap: nowrap;
  .left_list {
    // flex: 1;
    // border-right: 1px solid #000;
    background: #ccc;
    width: 180rpx;
    .left_item {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 28rpx;
      text-align: center;
      border-bottom: 1px solid #ccc;
      &.active {
        color: red;
        background-color: #fff;
        position: relative;
        &::before {
          content: '';
          border-left: 3px solid #f00;
          position: absolute;
          left: 0;
          width: 7rpx;
          top: 15rpx;
          bottom: 15rpx;
        }
      }
    }
  }
  .right_list {
    flex: 1;
    padding: 20rpx;
    .right_head{
      image{
        width: 100%;
        height: 200rpx;
      }
    }
    .logo_main{
      .right_logo{
        text-align: center;
        color: #ccc;
        .logo_title{
          font-size: 30rpx;
          &::before,&::after{
            content: '/';
            font-size: 20rpx;
          }
        }
        .logo_list{
          display: flex;
          flex-wrap: wrap;
          padding: 20rpx 0;
          .logo_good{
            width: 31%;
            text-align: center;
            margin-right: 10rpx;
            image{
              width: 100%;
              // height: 30%;
              height:130rpx;
            }
            text{
              text-align: center;
              color:#000;
            }
          }
        }
      }
    }
    
  }
}
</style>
